<template>
  <main>
    <div class="container-fluid">
      <div
        class="page-header min-height-300 gym"
        style="
          margin-right: -24px;
          margin-left: -34%;
        "
      >
        <span class="mask bg-gradient-success opacity-6"></span>
      </div>
      
    </div>
    <div class="py-4 container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header pb-0">
              <div class="d-flex align-items-center">
                <p class="mb-0">Edit Profile</p>
                <argon-button  v-if="this.$route.params.ifcreate == 0" color="success" size="sm" class="ms-auto" @click="editFacility"
                  >Edit</argon-button>
                  <argon-button  v-else color="success" size="sm" class="ms-auto" @click="createFacility"
                  >Upload</argon-button>
              </div>    
            </div>
            <div class="card-body">
              <p class="text-uppercase text-sm">Input Information</p>
              <div class="row">
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Facility Name</label>
                  <argon-signup-input type="text" v-model="item.f_name" />
                </div>
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Position</label>
                  <argon-signup-input type="text" v-model="item.location"/>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Price</label>
                  <argon-signup-input type="text" v-model="item.price" />
                </div>
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Img</label>
                  <div class="input-group mb-3">
                  <argon-file-input type="file" class="form-control" id="inputGroupFile01" @change="getFile"/>
                </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <label for="example-text-input" class="form-control-label"
                    >Capacity</label>
                  <argon-signup-input type="number" v-model="item.capacity" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import setNavPills from "@/assets/js/nav-pills.js";
import setTooltip from "@/assets/js/tooltip.js";
import ArgonSignupInput from "@/components/ArgonSignupInput.vue";
import ArgonButton from "@/components/ArgonButton.vue";
import ArgonFileInput from "@/components/ArgonFileInput.vue"
import axios from "axios"
import router from "@/router/index.js"
const body = document.getElementsByTagName("body")[0];

export default {
  name: "createfacility",
  data() {
    return {
      showMenu: false,
      item:{
        id:Number,
        f_name:String,
        location:String,
        price:String,
        capacity:Number,
        img:[],
      }

    };
  },
  components: { 
    ArgonSignupInput, 
    ArgonButton,
    ArgonFileInput
  },
  methods:{
    createFacility(){
      console.log("----------")
      console.log(this.item)
      console.log("----------")
      let formData = new FormData()
      for(let key in this.item){
        formData.append(key,this.item[key])
      }
      axios
      .post('https://fitzone.work:8080/add_facility',formData)
        .then((res)=>{
          console.log('It is',res.data);
        })
        router.push('/facility')
    },
    editFacility(){
      let formData = new FormData()
    for(let key in this.item){
      formData.append(key,this.item[key])
    }
      axios
      .post('https://fitzone.work:8080/update_facility',formData)
        .then((res)=>{
          console.log('It is',res.data);
        })
        router.push('/facility')
        
    },
    getFile(e){
      let file = e.target.files[0]
        this.item.img = file
        console.log(this.item.img)
    },
    
  },
  created(){
    const flag = sessionStorage.getItem("LOGINFLAG")
    if(flag == null){
      router.push('/signin')
    }
  },
  mounted() {
    this.$store.state.isAbsolute = true;
    setNavPills();
    setTooltip();
    for (var key in this.$route.params){
        if( key != "ifcreate"){
        this.item[key] = this.$route.params[key]
      }
    }
  },
  beforeMount() {
    this.$store.state.imageLayout = "profile-overview";
    this.$store.state.showNavbar = false;
    this.$store.state.showFooter = true;
    this.$store.state.hideConfigButton = true;
    body.classList.add("profile-overview");
  },
  beforeUnmount() {
    this.$store.state.isAbsolute = false;
    this.$store.state.imageLayout = "default";
    this.$store.state.showNavbar = true;
    this.$store.state.showFooter = true;
    this.$store.state.hideConfigButton = false;
    body.classList.remove("profile-overview");
  }
};
</script>
<style>
.gym{
  background-image:url('./../assets/img/login.jpg');
}
</style>
